<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">
	<ui:composition template="/templates/baseLayout.xhtml">
		<ui:define name="body">
			<f:metadata>
		        <f:viewParam id="carId" name="carId" value="#{invCtrl.car}" converter="entityConverter">
		        	<f:param name="entityName" value="Vehicle"/>
		        </f:viewParam>
		        <f:viewParam id="backTo" name="backTo" value="#{invCtrl.backTo}" />
		    </f:metadata>
		    <h:panelGrid width="100%">
    	    	<f:facet name="header">
    	    		<h:panelGrid columns="2" width="100%" columnClasses="padding-top, padding-top">
    	    			<a4j:commandButton styleClass="button1" onclick="window.history.go(-1);" style="float: left;" value="&lt;&lt; Back to #{invCtrl.backTo}"></a4j:commandButton>
	    	    		<div>
		                	<h4>#{invCtrl.car.make.name} - #{invCtrl.car.model.name} - #{invCtrl.car.style.name} <span>#{invCtrl.car.year}</span></h4>
		                </div>	  		                
	                </h:panelGrid>  	    		
    	    	</f:facet>
    	    	<br/>
		    	<h:panelGrid columns="2" width="100%" columnClasses="leftAlign,rightAlign">
		    		<rich:accordion switchType="client" width="300px" height="398px" cycledSwitching="true">
            			<rich:accordionItem header="Overview">
					    	<h:panelGrid id="overview" columns="2" columnClasses="rightAlign col-padding,leftAlign boldFont col-padding" 
					    		styleClass="padding_container table-1 text-1">
					    		<h:outputText value="Status:" />
					    		<h:outputText value="#{invCtrl.car.status}" converter="enumConverter" />
					    		<h:outputText value="Body:" />
					    		<h:outputText value="#{invCtrl.car.style.bodyType}" converter="enumConverter" />
					    		<h:outputText value="Mileage:" />
					    		<h:outputText value="#{invCtrl.car.mileage}" />
					    		<h:outputText value="ETA Mileage:" />
					    		<h:outputText value="City: #{invCtrl.car.style.mileages[0].mileageCity} / HWY: #{invCtrl.car.style.mileages[0].mileageHwy}" />
					    		<h:outputText value="Exterior:" />
					    		<h:outputText value="#{invCtrl.car.colorExt}" />
					    		<h:outputText value="Interior:" />
					    		<h:outputText value="#{invCtrl.car.colorInt}" />
					    		<h:outputText value="VIN#: "/>
			                    <h:outputText value="#{invCtrl.car.vin}"/>			
			                    <h:outputText value="Warranty: "/>
			                    <h:outputText value="#{invCtrl.car.warrantyType}" converter="enumConverter"/>
			                    <h:outputText value="Price:" />
			                    <h:outputText value="#{invCtrl.car.salePrice}">
		                    		<f:convertNumber pattern="$0,000" />
		                    	</h:outputText>					    		    		
					    	</h:panelGrid>
					    	<br/>
					    	<h:panelGrid width="100%" columnClasses="centerAlign">
					    	<h:outputLink value="#{invCtrl.car.carfaxApprvUrl}" target="_new" rendered="#{not empty invCtrl.car.carfaxApprvUrl}">
		                    	<h:graphicImage value="/images/carfax_yes.gif"/>
							</h:outputLink>
							</h:panelGrid>
			    		</rich:accordionItem>
			    		<rich:accordionItem header="PowerTrain">
					    	<h:panelGrid id="powerTrain" columns="2" columnClasses="rightAlign col-padding,leftAlign boldFont col-padding" style="font-size:14px; line-height:1.2em; color:#55544c;">
					    		<h:outputText value="Engine:" />
					    		<h:outputText value="#{invCtrl.car.engine}" />
					    		<h:outputText value="Transmission:" />
					    		<h:outputText value="#{invCtrl.car.transType}" converter="enumConverter"/>
					    		<h:outputText value="Drive Train:" />
					    		<h:outputText value="#{invCtrl.car.drvTrnType}" converter="enumConverter"/>
					    		<h:outputText value="Fuel Type:" />
					    		<h:outputText value="#{invCtrl.car.fuelType}" converter="enumConverter"/>
					    	</h:panelGrid>
			    		</rich:accordionItem>			    		
			    	</rich:accordion>	
			    	<h:panelGroup id="galleria" layout="block" style="height:400px; width:700px; float: right;">
			    		<ui:repeat var="image" value="#{invCtrl.car.images}">
			    			<h:graphicImage value="/img/?imgId=#{image.imageId}" />
			    		</ui:repeat>
			    	</h:panelGroup>					    		
		    	</h:panelGrid>	
		    	<h:panelGrid width="100%">
		    		<f:facet name="header">
		               <h3>Options</h3> 
		            </f:facet>			    		
    				<rich:dataGrid columns="4" elements="12" value="#{invCtrl.car.distinctGroups}" var="group" style="width: 100%;">
    					<h:panelGrid width="100%" headerClass="subHeader nowrap">
			    			<f:facet name="header">
				                #{group.name}
				            </f:facet>			    		
		    				<rich:list value="#{invCtrl.car.features}" var="feat" styleClass="list-1">
		    					<h:outputText value="#{feat.featureValue}" rendered="#{group.name == feat.featureGroup.name}" styleClass="text-1"/>								        
						    </rich:list>
						 </h:panelGrid>   		    			
		    		</rich:dataGrid>		    			    	
		    	</h:panelGrid>				    			    	
		    </h:panelGrid>
			 <script>
			    // Load the classic theme
			    Galleria.loadTheme('#{facesContext.externalContext.requestContextPath}/js/galleria.classic.min.js');			
			    // Initialize Galleria
			    Galleria.run('#galleria');		
		    </script>
		</ui:define>
	</ui:composition>	
</html>